import './index.scss';
import TitlePublic from '@/components/title-public/index';
const imgUr = 'https://photo.tuchong.com/21391232/f/829426399.jpg';
import React, { useEffect, useRef, Fragment } from 'react';
import {
  Map,
  APILoader,
  ScaleControl,
  ToolBarControl,
  ControlBarControl,
  Geolocation
} from '@uiw/react-amap';
export default function ContactUs() {
  const leftList = [
    {
      title: '总部地址',
      icon: 'icon-dingwei',
      content: '湖北省武汉市江夏区安山街道青春村牛家湾'
    },
    {
      title: '手机',
      icon: 'icon-shouji',
      content: '18171438963'
    },
    {
      title: '邮箱',
      icon: 'icon-youxiang',
      content: '615543024@qq.com'
    }
  ];
  return (
    <div>
      <img src={imgUr} alt="" className="baner-img" />
      <TitlePublic englishTitle="Contact Us" chineseTitle="联系我们" />

      <div className="bottom-area">
        <ul className="left-area">
          {leftList?.map((item, index) => {
            return (
              <li key={index} className="li-left">
                <i className={`iconfont ${item.icon}`}></i>
                <div>
                  <p className="title">{item.title}</p>
                  <p className="content">{item.content}</p>
                </div>
              </li>
            );
          })}
        </ul>
        <div className="right-area">
          <APILoader version="2.0.5" akey="a9acda04bd7a895fb35855d2a60b3a88">
            <div>
              <Map style={{ height: 300 }}>
                <ScaleControl offset={[16, 30]} position="LB" />
                <ToolBarControl offset={[16, 10]} position="RB" />
                <ControlBarControl offset={[16, 180]} position="RB" />
                <Geolocation
                  maximumAge={100000}
                  borderRadius="5px"
                  position="RB"
                  offset={[16, 80]}
                  zoomToAccuracy={true}
                  showCircle={true}
                />
              </Map>
              {/* <Map style={{ height: 300 }}>
                {({ AMap, map, container }) => {
                  return;
                }}
              </Map> */}
            </div>
          </APILoader>
        </div>
      </div>
    </div>
  );
}
